<template>
	<div class="h-600px mt-10px"
	style="width: 100%;">
		<div ref="box" class="w-100% h-full"></div>
	</div>
</template>
<script lang="ts" setup>
import { kData } from '@/utils/kData';
import * as echarts from 'echarts';

const chartData = ref<any>(kData.reverse());
const box = ref<HTMLElement>();
// 获取数据中的日期
const dates = chartData.value.map((item: any) => {
	return item[0];
})
// 整理数据
const data = chartData.value.map(function (item: any) {
	return [+item[1], +item[2], +item[5], +item[6]];
});
// 整理Ma
function calculateMA(dayCount: number, data: any) {
	var result = [];
	for (var i = 0, len = data.length; i < len; i++) {
		if (i < dayCount) {
			result.push('-');
			continue;
		}
		var sum = 0;
		for (var j = 0; j < dayCount; j++) {
			sum += +data[i - j][1];
		}
		result.push(sum / dayCount);
	}
	return result;
}


const option = {
	backgroundColor: '#121212',
	legend: {
		data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
		inactiveColor: '#777',
		show:false
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			animation: false,
			type: 'cross',
			lineStyle: {
				color: '#376df4',
				width: 2,
				opacity: 1
			}
		}
	},
	xAxis: {
		type: 'category',
		data: dates,
		axisLine: { lineStyle: { color: '#8392A5' } }
	},
	yAxis: {
		scale: true,
		axisLine: { lineStyle: { color: '#8392A5' } },
		splitLine: { show: true },
		position: 'right'
	},
	grid: {
		bottom: 50,
		right:50,
		left:0,
		top:30
	},
	dataZoom: false,
	series: [
		{
			type: 'candlestick',
			name: 'day',
			data: data,
			// smooth:true,
			itemStyle: {
				color: '#FD1050',
				color0: '#0CF49B',
				borderColor: '#FD1050',
				borderColor0: '#0CF49B'
			}
		},
		{
			name: 'MA5',
			type: 'line',
			data: calculateMA(5, data),
			smooth: true,
			showSymbol: false,
			lineStyle: {
				width: 1
			}
		},
		{
			name: 'MA10',
			type: 'line',
			data: calculateMA(10, data),
			smooth: true,
			showSymbol: false,
			lineStyle: {
				width: 1
			}
		},
		{
			name: 'MA20',
			type: 'line',
			data: calculateMA(20, data),
			smooth: true,
			showSymbol: false,
			lineStyle: {
				width: 1
			}
		},
		{
			name: 'MA30',
			type: 'line',
			data: calculateMA(30, data),
			smooth: true,
			showSymbol: false,
			lineStyle: {
				width: 1
			}
		}
	]
};
// 样式
onMounted(() => {
	const myChart = echarts.init(box.value, 'dark');
	option && myChart.setOption(option);
});
</script>
